<template>
  <view class="content">
    <block v-for="(item, index) in orderMarket.data" :key="index">
      <!-- <ccbox :detail="item" @buy="openPass" /> -->
      <view class="box">
        <!-- 卖方username -->
        <view class="top_name flex">
          <image src="/static/mf/shop/shop_avatar.png" mode="" />
          <view class="top_name_text">{{
            item.user && item.user.username
          }}</view>
        </view>
        <!-- 算力，卖出金额 -->
        <view class="center_info flex">
          <view class="flex1 power">
            {{ $t("mf.c2c.power")
            }}<text style="color: #fff">{{ item.power_total }} T</text>
          </view>
          <view class="amount">
            {{ $t("mf.c2c.price")
            }}{{ item.goods_info && item.goods_info.pay_symbol }}：<text
              style="color: #fee8b2; font-size: 30rpx"
              >{{ item.sell_price }}</text
            >
          </view>
        </view>
        <!-- 剩余挖矿天数 -->
        <view class="bottom_box flex">
          <view class="surplus_day flex1">
            {{
              $t("mf.c2c.surplus_day", {
                day: item.cycle_day - item.shifang_day,
              })
            }}
          </view>
          <button class="buy_btn" @tap.stop="openPass(item.id)">
            {{ $t("mf.c2c.buy") }}
          </button>
        </view>
      </view>
    </block>
    <graceLoading
      :loadingType="
        loading['mf.shop.order_market'] ? 1 : orderMarket.has_next_page ? 0 : 2
      "
    ></graceLoading>
    <cloudPayPassword
      :show="showpay"
      @keyboardDone="payPasswordDone"
      @close="showPay"
    >
    </cloudPayPassword>
  </view>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import ccbox from "./ccbox";
export default {
  components: {
    ccbox,
  },
  data() {
    return {
      showpay: false,
      market_id: null,
    };
  },
  methods: {
    ...mapActions("mf/shop", ["buyOrder"]),
    showPay() {
      this.showpay = !this.showpay;
    },
    // 打开密码输入框
    openPass(data) {
      // console.log(data);
      // this.market_id = data;
      // this.showPay();
      this.handleNavTo({ url: "/pages/mf/shop/c2cDetail?id=" + data });
    },
    // 购买二手矿机
    payPasswordDone(data) {
      this.showPay();
      this.buyOrder({
        order_id: this.market_id,
        pay_password: data.password,
      });
    },
  },
  computed: {
    ...mapGetters("mf/shop", ["orderMarket"]),
  },
};
</script>

<style scoped>
.box {
  width: 710rpx;
  height: 332rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  box-sizing: border-box;
  padding: 40rpx;
  margin-bottom: 24rpx;
}
.top_name {
  align-items: center;
  margin-bottom: 40rpx;
}
.top_name image {
  width: 66rpx;
  height: 66rpx;
  margin-right: 30rpx;
}
.top_name_text {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 42rpx;
}
.power {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 40rpx;
}
.amount {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 40rpx;
}
.center_info {
  margin-bottom: 40rpx;
}
.bottom_box {
  align-items: center;
}
.surplus_day {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 40rpx;
}
.buy_btn {
  width: 206rpx;
  height: 72rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55rpx;
  line-height: 72rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2b2c3e;
}
</style>